<template>
	<view class="login">
		<!-- 1.登录 19827352498 aa-->
		<view v-if="nowPannel=='login'" class="pannel">
			<view class="title">
				<view>欢迎登录</view>
				<view class="tips">还没有账号，<text @click="changepannel('register')">立即注册</text></view>
			</view>
			<!-- 表单部分 -->
			<input v-model="loginData.phoneNumber" class="formItem" placeholder="请输入手机号" />
			<input v-model="loginData.password" class="formItem" :password="true" placeholder="请输入密码" />
			<!-- 按钮 -->
			<view class="btn" @click="toLogin">登录</view>
		</view>


		<!-- 2.注册 -->
		<view v-if="nowPannel=='register'" class="pannel">
			<view class="title">
				<view>注册</view>
				<view class="tips">已有账号，<text @click="changepannel('login')">立即登录</text></view>
			</view>
			<!-- 表单部分 -->
			<input v-model="registerData.username" class="formItem" placeholder="请输入姓名" />
			<input v-model="registerData.phoneNumber" class="formItem" placeholder="请输入手机号" />
			<input v-model="registerData.idNumber" class="formItem" placeholder="请输入身份证号" />
			<input v-model="registerData.address" class="formItem" placeholder="请输入家庭住址" />
			<input v-model="registerData.houseNumber" class="formItem" placeholder="请输入门牌号" />
			<input v-model="registerData.password" class="formItem" :password="true" placeholder="请输入密码" />
			<!-- 按钮 -->
			<view class="btn" @click="toRegister">注册</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowPannel: 'login',
				loginData: {
					password: "",
					phoneNumber: ""
				},
				registerData: {
					address: "",
					houseNumber: "",
					idNumber: "",
					password: "",
					phoneNumber: "",
					username: ""
				},
				id: ""
			}
		},
		methods: {
			//1.登录注册面板切换方法
			changepannel(pan) {
				this.nowPannel = pan
			},
			// 2.登录方法
			toLogin() {
				// 判断手机号密码非空，如果为空，提示用户，且不执行后面代码return！！
				if (!(this.loginData.phoneNumber && this.loginData.password)) {
					// 提示用户
					return uni.showToast({
						title: "请完整填写内容",
						icon: "error",
					})
					// return;
				}
				// 
				// 登录  "phoneNumber": "15196506774",
				// "username": "winter",
				// console.log('登录')
				uni.request({
					url: "http://blog.coldworld.top:8081/user/login",
					method: "POST",
					data: this.loginData,
					success: (res) => {
						// console.log(res)
						if (res.data.code == 20000) {
							// #todo 
							// console.log(res)
							uni.setStorageSync("id", res.data.data.id)
							uni.showToast({
								title: "登录成功",
								icon: "success",
							})
							setTimeout(() => {
								// 1.5s后跳到到登录页
								uni.switchTab({
									// 跳转到tabbar页面
									url: "../index/index"
								})
							}, 1500)

						} else {
							// 提示用户
							return uni.showToast({
								title: "用户名或密码错误",
								icon: "error",
							})
						}

					}
				})

			},
			// 3.注册方法
			toRegister() {
				// 判断手机号密码非空，如果为空，提示用户，且不执行后面代码 账号密码 1.aaa aa 2.147 147
				if (!(this.registerData.address && this.registerData.houseNumber && this.registerData.idNumber && this
						.registerData.password && this.registerData.phoneNumber && this.registerData.username)) {
					// 提示用户
					return uni.showToast({
						title: "请完整填写内容",
						icon: "error",
					})
				}

				// 注册请求
				uni.request({
					url: "http://blog.coldworld.top:8081/user/register",
					method: "POST",
					data: this.registerData,
					success: (res) => {
						// console.log(res)
						if (res.data.code == 20000) {
							// 注册案例  19980217551 123 19827352498 aa
							// console.log(res.data.message)
							this.loginData.phoneNumber = this.registerData.phoneNumber
							this.loginData.password = this.registerData.password
							this.registerData = {}
							uni.showToast({
								title: res.data.message,
								icon: "success",
							})
							this.nowPannel = 'login'
						} else {
							// 提示用户
							return uni.showToast({
								title: res.data.message,
								icon: "error",
							})
						}

					}
				})
			}

		}
	}
</script>

<style lang="scss">
	.login {
		.pannel {
			padding: 0rpx 40rpx;

			.title {
				margin: 200rpx 0 100rpx;
				font-size: 40rpx;
				font-weight: bold;

				.tips {
					color: #999;
					font-weight: normal;

					text {
						color: #1296db;
					}
				}
			}

			.formItem {
				height: 100rpx;
				background-color: #eee;
				margin-bottom: 40rpx;
				border-radius: 50rpx;
				padding-left: 40rpx;
			}

			.btn {
				height: 100rpx;
				background-color: #1296db;
				border-radius: 50rpx;
				color: #fff;
				line-height: 100rpx;
				text-align: center;
				font-weight: bold;
			}

		}
	}
</style>
